<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>浮点流觞房产信息平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="zhuye.css">

</head>

<body class="bg-gray-100 font-sans">







<header>
    <div id="dio">
        <div class="top-bar">
            <div class="logo-container">
                <!-- <img src="logo.jpg" alt="logo"> -->
                <span class="logo-text">浮点流觞</span>
            </div>
            <div class="sub-nav">
                <a href="#">个人中心</a>
                <a href="#">商家中心</a>
                <a href="#">帮助中心</a>
                <a href="javascript:;" @click="xianshikefu">在线客服</a>
                <a href="denglu.html" class="register-item">登录</a>
                <a href="zhuce.html" class="register-item">注册</a>
            </div>
        </div>
        <!--智能客服对话框-->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="问题" label-width="200px">
                    <el-input v-model="form.ask" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="答案" label-width="200px">
                    <el-input v-model="form.que" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="deepseek">提 问</el-button>
            </div>
        </el-dialog>
    </div>

</header>

<nav class="category-nav">
    <a href="zufang.html" class="category-item">租房</a>
    <a href="ershoufang.html" class="category-item">二手房</a>
    <a href="xinfang.html" class="category-item">新房</a>
    <a href="#" class="category-item">商铺</a>
    <a href="#" class="category-item">生意转让</a>
    <a href="#" class="category-item">写字楼</a>
    <a href="#" class="category-item">厂房</a>
    <a href="#" class="category-item">仓库</a>
    <a href="#" class="category-item">土地</a>
    <a href="#" class="category-item">车位</a>
</nav>
<!-- 导航栏 -->
<nav class="bg-white shadow-md">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <h1 class="text-2xl font-bold text-white">浮点流觞房产信息平台</h1>
    </div>
</nav>

<!-- 主内容区域 -->
<div class="container mx-auto px-4 py-8">

    <div id="fangdongxinxi" class="bg-white p-6 rounded shadow-md">



        <button @click="getHouseInfo"
                class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
            <a href="tianjiafangyuan.html" class="category-item">添加房源</a></button>






        <button @click="getHouseInfo"
                class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            房源
        </button>
        <button @click="getHouseInfo" v-if="list.length > 0"
                class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
            <a href="fangyuan.html" class="category-item">详情</a></button>

        <button @click="clearHouseInfo" v-if="list.length > 0"
                class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 ml-2">
            取消显示
        </button>
        <button @click="getCheapestHouseInfo"
                class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
            最便宜房源
        </button>


        <button @click="clearCheapestHouseInfo" v-if="cheapestList.length > 0"
                class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 ml-2">
            取消显示
        </button>
        <button @click="getNewestHouseInfo"
                class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            最新房源
        </button>
        <button @click="clearNewestHouseInfo" v-if="newestList.length > 0"
                class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 ml-2">
            取消显示
        </button>

        <div class="mt-4">
            <p v-for="e in list" :key="e.id" class="border-b border-gray-300 py-2">{{e.fangyuanbiaoti}}</p>
        </div>
        <div class="mt-4">
            <p v-for="e in cheapestList" :key="e.id" class="border-b border-gray-300 py-2">{{e.fangyuanbiaoti}}</p>
        </div>
        <div class="mt-4">
            <p v-for="e in newestList" :key="e.id" class="border-b border-gray-300 py-2">{{e.fangyuanbiaoti}}</p>
        </div>
    </div>
    <div class="container mx-auto px-4 py-8">
        <div id="fangdong" class="bg-white p-6 rounded shadow-md mb-6">
            <button @click="getLandlordInfo"
                    class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
                房东信息
            </button>
            <button @click="clearLandlordInfo" v-if="landlordList.length > 0"
                    class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 ml-2">
                取消显示
            </button>
            <div class="mt-4">
                <p v-for="e in landlordList" :key="e.id" class="border-b border-gray-300 py-2">{{e.zhenshixingming}}</p>
            </div>
        </div>




    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        new Vue({
            el: '#login',
            data: {
                loginUsername: '',
                loginPassword: '',
                loginError: '',
                isLoggedIn: false
            },
            methods: {
                login() {
                    axios({
                        url: 'http://localhost:8888/yonghuxinxi/login',
                        method: 'post',
                        data: {
                            yonghuming: this.loginUsername,
                            denglumima: this.loginPassword
                        }
                    }).then(resp => {
                        if (resp.data.success) {
                            this.isLoggedIn = true;
                            this.loginError = '';
                        } else {
                            this.loginError = resp.data.message;
                        }
                    }).catch(error => {
                        this.loginError = '登录请求出错，请稍后重试';
                    });
                }
            }
        });

        new Vue({
            el: '#fangdong',
            data: {
                landlordList: [],
            },
            mounted() {
                this.getLandlordInfo();
            },
            methods: {
                getLandlordInfo() {
                    axios({
                        url: 'http://localhost:8888/fangdongxinxi/find',
                        method: 'get'
                    }).then(resp => {
                        if (resp.data.success) {
                            this.landlordList = resp.data.data;
                        } else {
                            console.error('获取房东信息失败，原因:', resp.data.message);
                        }
                    }).catch(error => {
                        console.error('获取房东信息出错:', error);
                    });
                },
                clearLandlordInfo() {
                    this.landlordList = [];
                }
            }
        });

        new Vue({
            el: '#zhuce',
            data: {
                registrationList: []
            },
            methods: {
                getLandlordInfo() {
                    axios({
                        url: 'http://localhost:8888/fangdongxinxi/find',
                        method: 'get'
                    }).then(resp => {
                        if (resp.data.success) {
                            this.landlordList = resp.data.data;
                        } else {
                            console.error('获取房东信息失败，原因:', resp.data.message);
                        }
                    }).catch(error => {
                        console.error('获取房东信息出错:', error);
                    });
                },
            }
        });

        new Vue({
            el: '#fangdongxinxi',
            data: {
                list: [],
                cheapestList: [],
                newestList: []
            },
            mounted() {
                this.getHouseInfo();
            },
            methods: {
                getHouseInfo() {
                    axios({
                        url: 'http://localhost:8888/fangwujibenxinxi/fangyuan',
                        method: 'get'
                    }).then(resp => {
                        if (resp.data.success) {
                            this.list = resp.data.data;
                        } else {
                            console.error('获取房源信息失败，原因:', resp.data.message);
                        }
                    }).catch(error => {
                        console.error('获取房源信息出错:', error);
                    });
                },
                clearHouseInfo() {
                    this.list = [];
                },
                getCheapestHouseInfo() {
                    axios({
                        url: 'http://localhost:8888/fangwujibenxinxi/zuipianyifangyuan',
                        method: 'get'
                    }).then(resp => {
                        if (resp.data.success) {
                            this.cheapestList = resp.data.data;
                        } else {
                            console.error('获取最便宜房源信息失败，原因:', resp.data.message);
                        }
                    }).catch(error => {
                        console.error('获取最便宜房源信息出错:', error);
                    });
                },
                clearCheapestHouseInfo() {
                    this.cheapestList = [];
                },
                getNewestHouseInfo() {
                    axios({
                        url: 'http://localhost:8888/fangwujibenxinxi/zuixinfangyuan',
                        method: 'get'
                    }).then(resp => {
                        if (resp.data.success) {
                            this.newestList = resp.data.data;
                        } else {
                            console.error('获取最新房源信息失败，原因:', resp.data.message);
                        }
                    }).catch(error => {
                        console.error('获取最新房源信息出错:', error);
                    });
                },
                clearNewestHouseInfo() {
                    this.newestList = [];
                }
            }
        });









    </script>

</div>

    <!-- 版权部分 -->
    <div class="footer">
        <div class="footer-links">
            帮助中心
            售后服务
            线下门店
            关于浮点科技
            关于我们
            特色服务
        </div>
        <div class="aaaquanguokefei">
            <p>猜猜我们几个人</p >
            <p>                </p>
            <p>就爱在项目里面夹带私货</p >
            <button>下面这些按钮都是假的</button>
        </div>
        <div class="footer-contact">
            <p>联系热线</p >
            <p>                </p>
            <p>全国可用</p >
            <button>人工客服</button>
        </div>
        <div class="footer-copyright">
            <p>版权归浮点流觞所属</p >
            <p>让每个人都能享受科技带来的美好生活</p >
        </div>
    </div>




</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#dio',
        data: {
            dialogFormVisible: false,
            form: {
                ask: '',
                que: ''
            }
        },
        methods: {
            xianshikefu() {
                this.dialogFormVisible = true
            },
            deepseek() {
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/deepseek/kefu',
                    params: {
                        wenti: this.form.ask
                    }
                }).then(resp => {
                    this.form.que = resp.data
                })
            }
        }

    })
</script>